framer-motion

What is framer-motion?

The framer-motion npm package is a popular library for creating animations and transitions in React applications. It provides a powerful and easy-to-use set of tools for animating components, handling gestures, and creating complex motion effects with simple declarative syntax.

What are framer-motion's main functionalities?

Basic Animations

Animate the horizontal position of a component to 100 pixels.

{"<motion.div animate={{ x: 100 }} />"}

Variants

Use variants to define animation states and transition between them.

{"<motion.div variants={variants} initial='hidden' animate='visible' />"}

Gestures

Scale a button up on hover and down on tap.

{"<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} />"}

Drag

Make a component draggable.

{"<motion.div drag />"}

Shared Layout Animations

Animate layout changes between components that share a layoutId.

{"<motion.ul layout><motion.li layoutId='id' /></motion.ul>"}

Exit Animations

Animate the component out when it's removed from the React tree.

{"<motion.div exit={{ opacity: 0 }} />"}

Other packages similar to framer-motion

react-spring

React-spring is a spring-physics based animation library that allows for a wide range of animations in React applications. It is similar to framer-motion in that it provides a way to create animations, but it uses spring physics for a more natural motion. React-spring is more focused on physics-based animations, whereas framer-motion offers a wider range of animation utilities, including gesture handling and drag.

react-motion

React-motion is another animation library for React that provides a powerful way to create animations using spring configurations. It is less declarative and more configuration-based compared to framer-motion, which might be preferred by developers who want more control over the animation physics.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript animation library that works well with React and other frameworks. It is not specifically designed for React like framer-motion, but it offers a wide range of animation capabilities and fine-grained control over animations. GSAP is known for its performance and flexibility, but it has a steeper learning curve compared to framer-motion.

animejs

Anime.js is a lightweight JavaScript animation library that can be used with any web framework, including React. It is similar to framer-motion in terms of providing a simple API for animations, but it does not offer React-specific features like framer-motion does. Anime.js is a good choice for developers looking for a general-purpose animation library that is easy to use and extend.

README

Framer Motion

An open source motion library for React, made by Framer.

Framer Motion is an open source, production-ready library that’s designed for all creative developers.

It looks like this:

<motion.div animate={{ x: 0 }} />

It does all this:

• Springs
• Keyframes
• Layout animations
• Shared layout animations
• Gestures (drag/tap/hover)
• Scroll animations
• SVG paths
• Exit animations
• Server-side rendering
• Hardware-accelerated animations
• Orchestrate animations across components
• CSS variables

...and a whole lot more.

Get started

🐇 Quick start

Install framer-motion with via your package manager:

npm install framer-motion

Then import the motion component:

import { motion } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)

📚 Docs

• Check out our documentation for guides and a full API reference.
• Or see our examples for inspiration.

💎 Contribute

• Want to contribute to Framer Motion? Our contributing guide has you covered.

👩🏻‍⚖️ License

• Framer Motion is MIT licensed.

✨ Framer

• Design and publish sites that inspire. Try Framer for free.

Changelog

[7.10.3] 2022-12-20

Changed

• Firing animateChanges in useLayoutEffect rather than useEffect to ensure optimised appear animations are handed off before paint.